<template>
  <div class="container1">
    <div class="head">
      <div class="img">
        <img :src="playlist.coverImgUrl" />
      </div>
      <div class="detail">
        <div class="hang1">
          <div class="gedan">歌单</div>
          <div class="name">{{ playlist.name }}</div>
        </div>
        <!-- <div class="hang2">
          <div class="img">
            <img :src="playlist.creator.avatarUrl" alt="">
          </div>
          <a href="">{{ play.creator.nickname }}</a>
          <span>{{ play.createTime }}</span>
        </div> -->
        <div class="hang2">
          <div class="img">
            <img
              :src="
                playlist.creator == undefined
                  ? '22'
                  : playlist.creator.avatarUrl
              "
              alt=""
            />
          </div>
          <a href="">{{
            playlist.creator == undefined ? "" : playlist.creator.nickname
          }}</a>
          <span>{{
            playlist.creator == undefined ? "" : playlist.createTime | dataForm
          }}</span>
        </div>
        <div class="hang3">
          <div class="playBtn" @click="allPlay">播放全部</div>
        </div>
        <div class="hang4">
          <p>标签：</p>
          <a v-for="(item, index) in playlist.tags" :key="index">{{ item }}</a>
        </div>
        <div class="hang5">
          <p>歌曲：{{ playlist.trackCount }}</p>
          <p>播放：{{ playlist.playCount | bofaCount }}</p>
        </div>
        <div class="hang6">
          <div v-show="!zhankai">简介：{{ playlist.description }}</div>
          <div v-show="zhankai">简介：{{ playlist.description }}</div>
          <i
            :class="zhankai ? 'iconfont icon-xiala i2' : 'iconfont icon-xiala '"
            @click="zhankai = !zhankai"
          ></i>
        </div>
      </div>
    </div>

    <div class="body">
      <div class="bodyNav">
        <a :class="type == 'list' ? 'selected' : ' '" @click="type = 'list'"
          >歌曲列表</a
        >
        <a
          :class="type == 'comment' ? 'selected' : ' '"
          @click="type = 'comment'"
          >评论</a
        >
        <a
          :class="type == 'collection' ? 'selected' : ' '"
          @click="type = 'collection'"
          >收藏者</a
        >
      </div>
      <div class="table" v-if="type == 'list' ? true : false">
        <el-table
          :data="songList"
          stripe
          style="width: 100%; font-size: 13px; color: #343434"
          :row-style="{ height: '35px' }"
          :cell-style="{ padding: '8px' }"
          @cell-dblclick="dblclick"
        >
          <el-table-column type="index" width="100"> </el-table-column>
          <el-table-column prop="name" label="音乐标题" width="600">
          </el-table-column>
          <el-table-column prop="ar[0].name" label="歌手" width="350">
          </el-table-column>
          <el-table-column prop="al.name" label="专题" width="450">
          </el-table-column>
          <el-table-column prop="dt" label="时长">
            <template scope="scope">
              {{ scope.row.dt | timeFilter }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="comment" v-if="type == 'comment' ? true : false">
        <el-input
          class="input_big"
          type="textarea"
          placeholder="请输入内容"
          maxlength="140"
          show-word-limit
          v-model="commentText"
        >
        </el-input>
        <div class="hang2">
          <div class="icon">
            <i class="iconfont icon-bofang"></i>
            <i class="iconfont icon-bofang"></i>
            <i class="iconfont icon-bofang"></i>
          </div>
          <el-button @click="sendComment">评论</el-button>
        </div>
        <div class="commentList">
          <h4>精彩评论</h4>
          <div
            class="itemBox"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <a class="img">
              <img :src="item.user.avatarUrl" />
            </a>
            <div class="right">
              <p class="firstChild">
                <a class="nickname">{{ item.user.nickname }}：</a>
                <a>{{ item.content }}</a>
              </p>
              <p>{{ item.time | dataForm }}</p>
            </div>
          </div>

          <!-- 分页开始 -->
          <div class="page">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="commentsTotal"
              :page-size="commentPageSize"
              @current-change="commentChengePage"
              :current-page="commentCurrentPage"
            >
            </el-pagination>
          </div>
          <!-- 分页结束 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id1: 0,
      songList: [],
      ids: [],
      playlist: {},
      playlist1: {},
      type: "list",
      commentList: {},
      commentsTotal: 0,
      commentCurrentPage: 1,
      commentPageSize: 50,
      audioSrc: "",
      currentTime: 0,
      duration: 0,
      zhankai: false, //是否展开简介栏
      commentText: "",
    };
  },
  methods: {
    //发送请求获取歌曲列表
    async getSongList() {
      //获取我的歌单列表

      // const data1 = await this.$http(`/playlist/detail?id=${this.id1}`);
      const data1 = await this.$http({
        url: `/playlist/detail?id=${this.id1}`,
        method: "post",
        data: {
          id: this.id1,
          cookie: this.$store.state.cookie,
        },
      });
      this.playlist = data1.data.playlist;

      var trackIds = this.playlist.trackIds;

      var ids = [];
      trackIds.forEach((element) => {
        ids.push(element.id);
      });
      //通过ids获取全部歌曲

      const data2 = await this.$http(`/song/detail?ids=${ids}`);
      this.songList = data2.data.songs;
    },

    //通过歌单id获取全部评论
    async getcomment() {
      var commentsOffset = (this.commentCurrentPage - 1) * this.commentPageSize;
      const data3 = await this.$http(
        `/comment/playlist?id=${this.id1}&offset=${commentsOffset}`
      );

      this.commentList = data3.data.comments;
      this.commentsTotal = data3.data.total;
    },
    //切换页码
    commentChengePage(commentCurrentPage) {
      this.commentCurrentPage = commentCurrentPage;
      //重新获取评论
      this.getcomment();
    },

    //某个单元格被双击时触发 传递当前歌曲信息到父组件的songlist中
    async dblclick(row) {
      var id = row.id;
      //发送请求获取歌曲
      //const data4 = await this.$http(`/song/url?id=${id}`);
      //向父组件的播放器传递url

      //this.$emit("getUrl", data4.data.data[0]);
      this.$emit("getSong", row);
      console.log(row);
    },
    // 把歌单列表添加到播放列表
    allPlay() {
      this.$emit("allPlay", this.songList);
    },
    //发送评论
    async sendComment() {
      var timestamp = +new Date();
      console.log(timestamp);
      if (this.$store.state.cookie == "") {
        this.$message({
          showClose: true,
          message: "请先登录",
          type: "error",
        });
        return;
      }

      var id = this.id1;
      var content = this.commentText;
      var res = await this.$http({
        url: `comment?t=1&type=2&id=${id}&content=${content}&timestamp=${timestamp}`,
        method: "post",
        data: {
          cookie: this.$store.state.cookie,
        },
      });
      console.log(res);
      if (res.data.code == 200) {
        this.$message({
          showClose: true,
          message: "评论成功",
          type: "success",
        });
      }
    },
  },
  props: ["id"],
  beforeCreate() {},
  created() {
    //获取上一页码传过来的歌单id值
    this.id1 = this.$route.params.id;

    //通过id获取歌曲列表
    this.getSongList();
    //
    this.getcomment();
  },
};
</script>

<style lang="less" scoped>
.container1 {
  padding-left: 30px;
}
.el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: hidden;
}

.head {
  display: flex;
  height: 230px;

  .img {
    height: 180px;
    width: 180px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .detail {
    flex: 1;
    .hang1 {
      display: flex;
      .gedan {
        color: #ef6060;
        padding: 3px;
        border: 1px solid #ef6060;
        border-radius: 3px;
        font-size: 14px;
        margin-right: 8px;
      }
      .name {
        font-size: 20px;
        font-weight: 700;
      }
    }
    .hang2 {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .img {
        width: 25px;
        height: 25px;

        border-radius: 50%;
      }
      a {
        color: #8592ca;
        font-size: 12px;
        margin-right: 10px;
      }
      span {
        font-size: 12px;
        color: #797575;
      }
    }
    .hang3 {
      display: flex;
      margin-top: 10px;
      div {
        height: 26px;
        line-height: 26px;
        border-radius: 13px;
        padding: 0px 8px;
        border: 1px solid #757575;
        font-size: 14px;
        margin-right: 10px;
      }
    }
    .hang4 {
      margin-top: 15px;
      font-size: 13px;
      display: flex;
      color: #797575;
      a {
        color: #507daf;
        margin-right: 8px;
      }
    }
    .hang5 {
      display: flex;
      font-size: 13px;
      margin-top: 8px;
      p {
        color: #797575;
      }
    }
    .hang6 {
      font-size: 13px;
      margin-top: 8px;
      position: relative;
      div {
        color: #797575;
        overflow: hidden;
        width: 1200px;
      }
      & div:nth-child(1) {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      i {
        position: absolute;
        right: 100px;
        top: 0px;
      }
      .i2 {
        transform: rotateX(180deg);
      }
    }
  }
}
.body {
  el-table__row {
    font-size: 13px;
  }
  .bodyNav {
    a {
      display: inline-block;
      font-size: 13px;
      margin-right: 18px;
      padding-bottom: 4px;
    }
    .selected {
      border-bottom: 3px solid #ff0000;
    }
  }
  // 评论
}
.comment {
  /deep/.el-textarea__inner {
    margin-top: 10px;
    height: 70px;
  }

  .hang2 {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    .icon {
      .iconfont {
        font-size: 18px;
        margin-right: 8px;
      }
    }
    /deep/ .el-button.is-round {
      padding: 6px 15px;
    }
  }
  .itemBox {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dddddd;
    padding: 20px 0;
    .img {
      cursor: pointer;
      display: inline-block;
      height: 36px;
      width: 36px;
      border-radius: 50%;
      border: 1px solid black;
      margin-right: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      font-size: 12px;
      .firstChild {
        margin-bottom: 12px;
      }
    }

    .nickname {
      cursor: pointer;
      color: #5c86b4;
    }
  }
}

//分页开始
.page {
  text-align: center;
}
.el-pagination {
  display: inline-block;
  margin: 30px 0 70px;
  li {
    background-color: #fff;
  }
  is-background .el-pager li.active {
    background-color: #ec4141;
  }
}
::v-deep .el-pagination.is-background .el-pager {
  li {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
  }
  li:not(.disabled).active {
    background-color: #ec4141; //修改后的背景图颜色
    color: #fff;
  }
}
//分页结束
</style>